<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}自然之友 - 自然科普宣讲团队{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    {% block extra_css %}{% endblock %}
</head>
<body>
    <header>
        <div class="container">
            <div class="logo">
                <h1>自然之友</h1>
                <p>探索自然奥秘 · 传播科学知识</p>
            </div>
            <nav>
                <ul>
                    <li><a href="{{ url_for('main.index') }}">首页</a></li>
                    <li><a href="{{ url_for('main.about') }}">关于我们</a></li>
                    <li><a href="{{ url_for('main.events') }}">宣讲活动</a></li>
                    <li><a href="{{ url_for('main.team') }}">团队成员</a></li>
                    <li><a href="{{ url_for('main.gallery') }}">科普图库</a></li>
                    <li><a href="{{ url_for('main.contact') }}">联系我们</a></li>
                    {% if current_user.is_authenticated %}
                        <li><a href="{{ url_for('auth.logout') }}">退出</a></li>
                        {% if current_user.is_admin %}
                            <li><a href="{{ url_for('main.admin_dashboard') }}">管理</a></li>
                        {% endif %}
                    {% else %}
                        <li><a href="{{ url_for('auth.login') }}">登录</a></li>
                    {% endif %}
                </ul>
                <div class="mobile-menu-btn">
                    <i class="fas fa-bars"></i>
                </div>
            </nav>
        </div>
    </header>

    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            <div class="flash-messages">
                {% for category, message in messages %}
                    <div class="flash-{{ category }}">{{ message }}</div>
                {% endfor %}
            </div>
        {% endif %}
    {% endwith %}

    <main>
        {% block content %}{% endblock %}
    </main>

    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-about">
                    <h3>自然之友</h3>
                    <p>探索自然奥秘 · 传播科学知识</p>
                    <p>© {{ now.year }} 自然之友科普宣讲团队. 保留所有权利.</p>
                </div>
                <div class="footer-links">
                    <h3>快速链接</h3>
                    <ul>
                        <li><a href="{{ url_for('main.index') }}">首页</a></li>
                        <li><a href="{{ url_for('main.about') }}">关于我们</a></li>
                        <li><a href="{{ url_for('main.events') }}">宣讲活动</a></li>
                        <li><a href="{{ url_for('main.contact') }}">联系我们</a></li>
                    </ul>
                </div>
                <div class="footer-newsletter">
                    <h3>订阅我们的科普通讯</h3>
                    <form id="newsletterForm">
                        <input type="email" placeholder="您的电子邮箱" required>
                        <button type="submit" class="btn">订阅</button>
                    </form>
                </div>
            </div>
        </div>
    </footer>

    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
    {% block extra_js %}{% endblock %}
</body>
</html>